<template>
  <div class="tabul">
    <div class="listtab">
      <div
        :class="item.goodId == tabID ? 'cssXX' : ''"
        class="btn"
        v-for="(item, index) in list"
        :key="index"
        @click="tabBtn(item)"
        :style="
          'width:' +
          tabswidth +
          ';' +
          'font-size:' +
          tabsfontSize +
          ';' +
          'line-height:' +
          tabslineHeight +
          ';' +
          'margin-left:' +
          tabsmarginLeft
        "
      >
        {{ item.goodName }}
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  props: {
    list: {
      type: Array,
      default: "",
    },
    tabs: {
      type: Number,
      default: "",
    },
  },
  data() {
    return {
      tabID: 0,
      tabswidth: "45%",
      tabsfontSize: "12px",
      tabslineHeight: "50px",
      tabsmarginLeft: "30px",
    };
  },
  created() {
    setTimeout(() => {
      if (this.list[0].goodName == "星期一") {
        const weekday = moment().day();
        switch (weekday) {
          case 1: // 星期一
            this.tabID = 0;
            break;
          case 2: // 星期二
            this.tabID = 1;
            break;
          case 3: // 星期三
            this.tabID = 2;
            break;
          case 4: // 星期四
            this.tabID = 3;
            break;
          case 5: // 星期五
            this.tabID = 4;
            break;
          case 6: // 星期六
            this.tabID = 0;
            break;
          case 0: // 星期日
            this.tabID = 0;
            break;
          default:
            this.tabID = 0; // 错误情况
            return;
        }
      } else {
        this.tabID = this.list[0].goodId;
      }
    }, 500);
    setTimeout(() => {
      if (this.tabs == 2) {
         this.tabswidth = "48%";
         this.tabsfontSize = "12px";
         this.tabslineHeight = "50px";
         this.tabsmarginLeft = "15px";
      }
      if (this.tabs == 3) {
         this.tabswidth = "30%";
         this.tabsfontSize = "9px";
         this.tabslineHeight = "35px";
         this.tabsmarginLeft = "15px";
      }
      if (this.tabs == 5) {
         this.tabswidth = "20%";
         this.tabsfontSize = "12px";
         this.tabslineHeight = "30px";
         this.tabsmarginLeft = "5px";
      }
      //  if (props.tabs == 5) {
      //   tabswidth.value = "45%";
      //   tabsfontSize.value = "12px";
      //   tabslineHeight.value = "50px";
      //   tabsmarginLeft.value = "30px";
      // }
    }, 0);
  },
  mounted() {},
  methods: {
    tabBtn(val) {
      this.tabID = val.goodId;
      this.$emit("tabFH", val);
    },
  },
};
// const tabID = ref(0);
// const tabswidth = ref("45%");
// const tabsfontSize = ref("12px");
// const tabslineHeight = ref("50px");
// const tabsmarginLeft = ref("30px");
// const props = defineProps({
//   list: {
//     type: Array,
//     default: "",
//   },
//   tabs: {
//     type: Number,
//     default: "",
//   },
// });
// onMounted(() => {
//   {
//     setTimeout(() => {
//       if (props.list[0].goodName == "星期一") {
//         const weekday = moment().day();
//         switch (weekday) {
//           case 1: // 星期一
//             tabID.value = 0;
//             break;
//           case 2: // 星期二
//             tabID.value = 1;
//             break;
//           case 3: // 星期三
//             tabID.value = 2;
//             break;
//           case 4: // 星期四
//             tabID.value = 3;
//             break;
//           case 5: // 星期五
//             tabID.value = 4;
//             break;
//           case 6: // 星期六
//             tabID.value = 0;
//             break;
//           case 0: // 星期日
//             tabID.value = 0;
//             break;
//           default:
//             tabID.value = 0; // 错误情况
//             return;
//         }
//       } else {
//         tabID.value = props.list[0].goodId;
//       }
//     }, 500);
//     setTimeout(() => {
//       if (props.tabs == 2) {
//         tabswidth.value = "48%";
//         tabsfontSize.value = "12px";
//         tabslineHeight.value = "50px";
//         tabsmarginLeft.value = "15px";
//       }
//       if (props.tabs == 3) {
//         tabswidth.value = "30%";
//         tabsfontSize.value = "9px";
//         tabslineHeight.value = "35px";
//         tabsmarginLeft.value = "15px";
//       }
//       if (props.tabs == 5) {
//         tabswidth.value = "20%";
//         tabsfontSize.value = "12px";
//         tabslineHeight.value = "30px";
//         tabsmarginLeft.value = "5px";
//       }
//       //  if (props.tabs == 5) {
//       //   tabswidth.value = "45%";
//       //   tabsfontSize.value = "12px";
//       //   tabslineHeight.value = "50px";
//       //   tabsmarginLeft.value = "30px";
//       // }
//     }, 0);
//   }
// });
// const emit = defineEmits(["tabFH"]);
// function tabBtn(val) {
//   tabID.value = val.goodId;
//   emit("tabFH", val);
// }
</script>

<style lang="less" scoped>
.tabul {
  margin: 0 auto;
  overflow-y: hidden;
  overflow-x: scroll;
  width: 100%;
  background-color: rgb(247, 247, 247);
  padding: 5px 10px;
  box-sizing: border-box;

  .listtab {
    display: flex;
    align-items: center;
    padding-right: 10px;
    overflow-y: hidden;
    overflow-x: scroll;
  }

  .listtab::-webkit-scrollbar {
    display: none;
    /* 对于 Chrome, Safari, Edge */
  }

  .btn {
    flex-shrink: 0;
    border: 1px solid rgba(225, 229, 243, 1);
    background: rgba(255, 255, 255, 1);
    text-align: center;
    border-radius: 5px;
    font-weight: 600;
  }

  .btn:first-child {
    margin-left: 0 !important;
  }

  .cssXX {
    background: rgb(54, 194, 168);
    color: #fff;
    // border: 4rpx solid rgb(107, 176, 173);
    //color: rgb(107, 176, 173);
  }
}
</style>